<template>
	<view class="box">
		<up-steps current="-1" direction="column" dot>
			<up-steps-item title="已下单" desc="10:30" v-for="(item,index) in list" :key="index">
				<template #content>
					<view class="" style="display: flex;justify-content: space-between;">
						<view class="title">
							{{item.name}}
						</view>
						<up-tag size="mini" text="确认" type="info"></up-tag>
					</view>
					
				</template>
			</up-steps-item>
		</up-steps>
	</view>

</template>

<script setup>
	import {
		reactive,
		toRefs,
	} from 'vue'
	const itemStyle = reactive({
		height: '100px',
	})
	const list = reactive([{
			name: '中心下单',
		},
		{
			name: "人员确认"
		}, {
			name: "驶向现场"
		},
		{
			name: "到达现场"
		},
		{
			name: "离开现场"
		},
		{
			name:'到达医院'
		},
		{
			name:'站内待命'
		}
	])
</script>

<style scoped lang="scss">
	// .box {
	// 	width: 100%;
	// 	height: 94vh;
	// }
	page {
		height: 98%;
		width: 100%;
	}

	.box {
		height: 98%;
		padding: 20rpx;
	}

	::v-deep(.up-steps-item) {
		height: 98% !important;
	}

	.u-steps-item__content {
		display: flex;
	}

	::v-deep(.u-steps-item__content) {
		height: 98% !important;
		display: block;
	}
</style>